import React, { Component } from "react";
import { NavBar, Carousel, Flex } from "antd-mobile";
// 样式
import "./index.scss";
// axios
import myAxios from "../../utils/myAxios";
// axios
import axios from "axios";
// search
import Search from "../search/Search";
import { withRouter } from "react-router-dom";
class Index extends Component {
  constructor(props) {
    super(props);
    const CancelToken = axios.CancelToken;
    // 调用source方法
    this.source = CancelToken.source();
  }
  state = {
    data: [],
    imgHeight: 170,
    catitems: [],
    imgList: [],
  };
  // 点击轮播图中的图片，跳转到商品详情页
  carouselClick = (goods_id) => {
    this.props.history.push("/goodsDetail/" + goods_id);
  };
  // 点击导航图片，跳转到分类页面
  catitemsClick = (params) => {
    this.props.history.push("/category");
  };
  // 点击product
  productClick = (url) => {
    let querys = url.split("=")[1];
    console.log(querys);

    this.props.history.push("/goodList?query=" + querys); // 改傳參方式
    // this.props.history.push("/goodList/query='123")
  };
  componentDidMount() {
    myAxios
      .get("home/swiperdata", {
        cancelToken: this.source.token,
      })
      .then((res) => {
        console.log(res);
        this.setState({
          data: res,
        });
      });
    myAxios
      .get("home/catitems", {
        cancelToken: this.source.token,
      })
      .then((res) => {
        console.log(res);
        this.setState({
          catitems: res,
        });
      });
    myAxios
      .get("home/floordata", {
        cancelToken: this.source.token,
      })
      .then((res) => {
        console.log(res);
        this.setState({
          imgList: res,
        });
      });
  }
  // 组件被销毁时，取消请求
  componentWillUnmount() {
    this.source.cancel("Operation canceled by the user.");
  }
  render() {
    return (
      <div className="app-index">
        {/* 导航 */}
        <div className="nav">
          <NavBar className="nav-con">优购商城</NavBar>
        </div>
        {/* 搜索 */}
        <div className="search">
          <Search></Search>
        </div>
        <div className="arousel">
          {/* 轮播图 */}
          <Carousel autoplay={true} infinite>
            {this.state.data.map((val) => (
              <div
                onClick={this.carouselClick.bind(this, val.goods_id)}
                key={val}
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
              >
                <img
                  src={val.image_src}
                  alt="网络不佳"
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </div>
            ))}
          </Carousel>
          {/* 图片导航 */}
          <div className="catitems">
            <div className="catitems-item">
              <Flex>
                {this.state.catitems.map((v) => {
                  return (
                    <Flex.Item key={v.image_src} onClick={this.catitemsClick}>
                      <img src={v.image_src} alt="" />
                    </Flex.Item>
                  );
                })}
              </Flex>
            </div>
          </div>
          {/* 图片列表 */}
          {/* 点击图片列表，跳转到一个搜索页面，返回商品分类*/}
          {/* 有三个一级分类标题：时尚女装，户外运动 ，箱包配饰*/}
          <div className="products">
            {this.state.imgList.map((v) => {
              return (
                <div className="imgListItem" key={v.floor_title.image_src}>
                  {/* 标题 */}
                  <div className="item-title">
                    <img src={v.floor_title.image_src} alt="" />
                  </div>
                  {/* 内容 ,还需数组遍历,v.product_list是一个数组*/}
                  <div className="item-con">
                    {v.product_list.map((vv) => {
                      return (
                        <div
                          className="item-con-single"
                          key={vv.image_src}
                          onClick={this.productClick.bind(
                            this,
                            vv.navigator_url
                          )}
                        >
                          <img src={vv.image_src} alt="" />
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(Index);
